<template>
  <div class="LegalService">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
      <div class="backIcon" @click="back">
        <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
      </div>
      <div class="theme">物业服务</div>
    </div>-->

    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="contect" v-for="item in list" :key="item.index">
          <div class="title">{{ item.serviceName }}</div>

          <van-cell class="rightIcon">
            <template slot="title">
              <span class="custom-title">联系人：{{item.contacts}}</span>
            </template>
            <img
              src="../../assets/treasureChest/thiredP/phoneIcon765.png"
              @click="callOut(item.servicePhone)"
            />
          </van-cell>
           <van-cell class="rightIcon">
            <template slot="title">
              <span class="custom-title">联系电话：{{item.servicePhone}}</span>
            </template>
          </van-cell>
          <van-cell>
            <template slot="title">
              <span class="custom-title">收费标准：{{item.fees}}</span>
            </template>
          </van-cell>
          <van-cell>
            <template slot="title">
              <span class="custom-title">联系地址：{{item.address}}</span>
            </template>
          </van-cell>
          <van-cell>
            <template slot="title">
              <span class="custom-title">简要介绍：{{item.serviceCase}}</span>
            </template>
          </van-cell>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  name: "LegalService",
  data() {
    return {
      list: [],
      finished: false,
      loading: false,

      pageSize: 10,
      pageIndex: 1,
      totalCount: 0
    };
  },
  methods: {
    back() {
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },

    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 向平安看点list push数据
        this.loading = true;
        this.requestPostPropertyService();
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= this.totalCount) {
          // 判断列表后台反馈数据总量=目前的数据量则结束
          this.finished = true;
        }
      }, 1000);
    },

    callOut(phoneNum) {
      this.$dialog
        .confirm({
          title: "拨打电话",
          message: "是否拨号：" + phoneNum
        })
        .then(() => {
          window.location.href = "tel://" + phoneNum;
        })
        .catch(() => {});
    },
    // 请求法律服务数据
    requestPostPropertyService() {
      this.post("convenient_people/loadInfo/", {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        dataAreaCode: "" ,// sessionStorage.getItem("dataAreaCode"),
        // title: "",
        // startTime: "2018-10-06 00:00:00",
        // endTime: "2020-11-06 00:00:00",
        serviceType: 1
      })
        .then(res => {
          this.pageIndex += 1;
          console.log("propertyService", res);
          this.list = this.list.concat(res.list);
          this.totalCount = res.pageInfo.totalCount;
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.LegalService {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    height: 100vh;
    // margin: 41px 0 0 0;

    .contect {
      margin: 0 0 $sm-spacing-col-base 0;

      .title {
        background-color: $sm-bg-color;
        padding: $sm-spaceing-block-md;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        font-weight: bold;

        &:before {
          // 利用伪类元素 设置图7_11.png 作为项目符号
          content: "";
          margin-right: $sm-pseudo-width-base;
          width: $sm-pseudo-width-sm;
          height: $sm-pseudo-height-xl;
          background-image: url("../../assets/home/7_11.png");
          border-radius: $sm-border-radius-md;
        }
      }
      .rightIcon {
        .custom{
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        img {
          height: $sm-img-size-md;
        }
      }
    }
  }
}
</style>